<script>
import {ref} from 'vue'
import login from '../util/utils.js'
import * as util from '../util/utils.js'

export default {
    props: ['name', 'price'],
    // 声明要自定义的事件
    emits: ['name'],
    data() {
        return {
            msg: 'hello vue'
        }
    },
    mounted() {
        console.log("mounted")
    },
    methods: {
        // changeMessage() {
        //     console.log(this.message)
        //     this.message = "hello vue"
        // }
    },
    created() {
        console.log("created")
    },
    beforeCreate() {
        console.log("beforeCreate")
    },
    beforeMount() {
        console.log("beforeMount")
    },
    setup(props, ctx) {
        console.log("setup")
        console.log("user", util.name)
        util.test()
        let message = ref('hello, Composition Api')

        function changeMessage() {
            console.log("change")
            // 触发事件 传递参数
            ctx.emit('name', "小米")
        }

        return {
            message,
            changeMessage
        }
    }
}
</script>

<template>
    <h2>{{ message }}</h2>
    <button @click="changeMessage">点击</button>
</template>

<style scoped>

</style>